<style>
.textcenter{
text-align: center;
}
</style>
<template>
    <div>
        <Row :gutter="20">
            <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in countData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
                <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
                <p>{{ infor.count }}</p>
                <p>{{ infor.title }}</p>
                </infor-card>
            </i-col>
        </Row>
        <Row :gutter="20">
          <Row :gutter="20">
            <Col span="24">
                <Card >
                  <h3>近两日无代发数据</h3>
                  <Table stripe :columns="columns1" :data="list1"></Table>
                </Card>
            </Col>
          </Row>
          <Row :gutter="20">
            <Col span="12">
                <Card >
                  <h3>近两日拨打电话数量</h3>
                  <Table stripe :columns="columns4" :data="list4"></Table>
                </Card>
            </Col>
            <Col span="12">
              <Card >
                <h3>近两日各招工电话平均时间间隔</h3>
                <Table stripe :columns="columns3" :data="list3"></Table>
              </Card>
            </Col>
          </Row>
          <Row :gutter="20">
            <Col span="24">
              <Card >
                <h3>按日统计电话联系</h3>
                <Form :model="searchData" inline>
                  <Form-item prop="date">
                    <Date-picker type="date" v-model="searchData.date" @on-change="setdate" placeholder="选择日期" style="width: 200px"></Date-picker>
                  </Form-item>
                  <Form-item>
                      <Button type="primary" :loading="loading2" @click="search1">
                        <span v-if="!loading2">搜索</span>
                        <span v-else>搜索中</span>
                      </Button>
                  </Form-item>
                </Form>
                <h4>时间段</h4>
                <div v-if="showstatistics">
                   <chart-bar style="height:300px;width:100%" v-model="statisticslist2" :text="statisticslisttext"/>
                </div>
                <p v-else class="textcenter">无数据</p>
                <h4>招工 &nbsp;
                      <Button type="primary" size="small" @click="search2">
                        刷新
                      </Button>
                </h4>
                <Table stripe :columns="columns2" :data="list2"></Table>
                <Page :total="pagedata2.total" size="small" :current="pagedata2.current" :page-size="pagedata2.pageSize" :page-size-opts="pagedata2.pageSizeOpts"
                    @on-change="pageChange2" @on-page-size-change="sizeChange2" show-elevator show-sizer show-total></Page>
              </Card >
            </Col>
          </Row>
        </Row>
    </div>
</template>
<script>
import InforCard from '_c/info-card'
import { ChartBar } from '_c/charts'
import { getinventfull, getinventnotanswer, getinventcount1, getinventcount2, getinventitemtelnoavgbydaylist, getconnecttimebucket, getconnectbyinvent } from '@/api/other'
export default {
  name: 'statisticsinvent',
  components: {
    InforCard,
    ChartBar
  },
  data () {
    var self = this
    return {
      loading2: false,
      searchData: { date: '' },
      showstatistics: false,
      statisticslisttext: '按时间段统计',
      statisticslist2: {},
      showdata: false,
      countData: [
        { title: '已招满', icon: 'md-alert', count: 0, color: '#2d8cf0' },
        { title: '未接电话', icon: 'md-alert', count: 0, color: '#19be6b' }
      ],
      columns1: [
        {
          title: '日期',
          key: 'date'
        },
        {
          title: '发布状态',
          key: 'isactive',
          render: function (h, params) {
            const usestr = self.$t('isactive_' + params.row.isactive)
            var div = h('div', {}, usestr)
            return div
          }
        },
        {
          title: '审核状态',
          key: 'ispass',
          render: function (h, params) {
            const usestr = self.$t('ispass_' + params.row.ispass)
            var div = h('div', {}, usestr)
            return div
          }
        },
        {
          title: '总数',
          key: 'count'
        }
      ],
      list1: [],
      columns2: [
        {
          title: '编号',
          key: 'code',
          width: 150
        },
        {
          title: '状态',
          key: 'isactive',
          width: 160,
          render: function (h, params) {
            const active = self.$t('isactive_' + params.row.isactive)
            const pass = self.$t('ispass_' + params.row.ispass)
            const html = '<p>发布状态：' + active + '</p><p>审核状态：' + pass + '</p>'
            var div = h('div', {
              domProps: {
                innerHTML: html
              }
            })
            return div
          }
        },
        {
          title: '创建时间',
          key: 'createdate',
          width: 170
        },
        {
          title: '详细',
          key: 'info'
        },
        {
          title: '总数',
          sortable: true,
          key: 'count',
          width: 80
        }
      ],
      columns3: [
        {
          title: '日期',
          key: 'date'
        },
        {
          title: '平均间隔时长(分钟)',
          key: 'avg_time'
        }
      ],
      columns4: [
        {
          title: '日期',
          key: 'date'
        },
        {
          title: '拨打人总数',
          key: 'count_suid'
        },
        {
          title: '打电话总数',
          key: 'total'
        }
      ],
      list2: [],
      list2_status: 0,
      list3: [],
      list4: [],
      pagedata2: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOpts: [10, 50, 100]
      },
      pagedata3: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOpts: [10, 50, 100]
      }
    }
  },
  methods: {
    getData () {
      const that = this
      getinventfull().then(res => {
        const data = res.data
        if (data.code !== 200) {
          that.$Message.error(data.msg)
        } else {
          that.countData[0].count = data.data
        }
      })
      getinventnotanswer().then(res => {
        const data = res.data
        if (data.code !== 200) {
          that.$Message.error(data.msg)
        } else {
          that.countData[1].count = data.data
        }
      })
      getinventcount1().then(res => {
        const data = res.data
        if (data.code !== 200) {
          that.$Message.error(data.msg)
        } else {
          that.list1 = data.data
        }
      })
      getinventcount2().then(res => {
        const data = res.data
        if (data.code !== 200) {
          that.$Message.error(data.msg)
        } else {
          that.list4 = data.data
        }
      })
      getinventitemtelnoavgbydaylist().then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          this.list3 = data.data
        }
      })
    },
    getTableData2 () {
      this.searchData.page = this.pagedata2.current
      this.searchData.size = this.pagedata2.pageSize
      getconnectbyinvent(this.searchData).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
          this.list2 = []
          this.pagedata2.total = 0
          this.pagedata2.current = 1
        } else {
          this.$Message.success(data.msg)
          this.pagedata2.total = data.data.count
          this.list2 = data.data.list
        }
        this.list2_status += 1
      })
    },
    pageChange2 (current) {
      this.pagedata2.current = current
      this.getTableData2()
    },
    sizeChange2 (pageSize) {
      this.pagedata2.pageSize = pageSize
      this.pagedata2.current = 1
      this.getTableData2()
    },
    getstatisticslist () {
      this.statisticslisttext = this.searchData.date + ' 按时间段统计'
      this.statisticslist2 = []
      this.showstatistics = false
      getconnecttimebucket(this.searchData).then(res => {
        const data = res.data
        if (data.code === 200) {
          for (let key in data.data) {
            this.statisticslist2[data.data[key]['hour'] + '点'] = data.data[key]['count']
          }
          this.showstatistics = true
        } else {
          this.showstatistics = false
        }
        this.list2_status += 1
      })
    },
    search1 () {
      this.list2_status = 0
      this.loading2 = true
      this.list2 = []
      this.pagedata2.total = 0
      this.pagedata2.current = 1
      this.getTableData2()
      this.getstatisticslist()
      this.timer = setInterval(this.changeLoading2, 500)
    },
    search2 () {
      this.pagedata2.total = 0
      this.pagedata2.current = 1
      this.getTableData2()
    },
    changeLoading2 () {
      if (this.list2_status > 0) {
        this.loading2 = false
        clearInterval(this.timer)
      }
    },
    setdate (value) {
      this.searchData.date = value
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getData()
      this.search1()
    })
  }
}
</script>
